<template>
	<view class="home">

		<headerBar title="首页 AWE"></headerBar>

		<!-- 通知 -->
		<view class="notice">
			<uni-notice-bar showIcon="true" background-color="#eff3ff" color="#333" scrollable :speed="100"
				single="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
		</view>

		<!-- banner 图 -->
		<view class="banner box">
			<uni-swiper-dot :info="bnnaerList" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in bnnaerList" :key="index">
						<view class="swiper-item">
							<image :src="item.src"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 导航 -->
		<uni-grid class="box" :column="4" :showBorder="false" :highlight="false">
			<uni-grid-item class="grid-item">
				<navigator url="/pages/tabbar/tabbar-2/tabbar-2" open-type="switchTab">
					<image src="../../../static/img/gendan_icon.png" mode=""></image>
					<view class="text">跟单</view>
				</navigator>
			</uni-grid-item>
			<uni-grid-item class="grid-item">
				<navigator url="/">
					<image src="../../../static/img/zixun_icon.png" mode=""></image>
					<view class="text">资讯</view>
				</navigator>
			</uni-grid-item>
			<uni-grid-item class="grid-item">
				<navigator url="/pages/course/course">
					<image src="../../../static/img/jiaocheng_icon.png" mode=""></image>
					<view class="text">教程中心</view>
				</navigator>
			</uni-grid-item>
			<uni-grid-item class="grid-item">
				<navigator url="/pages/electronic-billing/electronic-billing">
					<image src="../../../static/img/zhangdan_icon.png" mode=""></image>
					<view class="text">电子账单</view>
				</navigator>
			</uni-grid-item>
		</uni-grid>

		<!-- api 授权 and 跟单 -->
		<view class="api-and-record box">
			<navigator class="item" url="/pages/authorization/identity">
				<image src="../../../static/img/shouquan_icon.png" mode=""></image>
				<text>API授权</text>
			</navigator>
			<view class="item">
				<image src="../../../static/img/woyaogendan_icon.png" mode=""></image>
				<text>我要跟单</text>
			</view>
		</view>

		<!-- 榜单 -->
		<view class="box">
			<view class="hero-tabs">
				<text v-for="(item,index) in heroTabs" :key="index" :class="{active: index === heroTabsCurrent}"
					@tap="heroClick(index)">{{item}}</text>
			</view>

			<view class="table-tabs">
				<view class="item" :class="{active: tabsCurrent === index}" v-for="(item,index) in tabs"
					@tap="tabsClick(index)">{{item}}</view>
			</view>

			<view class="table-wrap">
				<view v-show="tabsCurrent === 0">
					<uni-list :border="false">
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/one.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/two.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/three.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									4
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									5
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									6
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
					</uni-list>
				</view>
				<view v-show="tabsCurrent === 1">
					<uni-list :border="false">
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/one.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/two.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/three.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									4
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									5
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
					</uni-list>
				</view>
				<view v-show="tabsCurrent === 2">
					<uni-list :border="false">
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/one.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/two.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									<image src="../../../static/img/three.png" mode=""></image>
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
						<uni-list-item :border="false" title="转出" note="给张三转账成功">
							<view class="body" slot="body">
								<view class="rank">
									4
								</view>
								<view>
									<view class="name">黄黄航</view>
									<view class="income">收益：<text>32323</text> usdt</view>
								</view>
							</view>
							<view class="footer" slot="footer">
								<view class="money">2121212</view>
							</view>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import headerBar from '../../../components/header-bar';
	export default {
		components: {
			headerBar
		},
		data() {
			return {
				title: 'Hello',
				current: 0, // banner 图的当前索引
				mode: 'default', // banner 图的指示点类型
				bnnaerList: [{
						content: '1',
						src: '../../../static/img/banner2.png'
					},
					{
						content: '2',
						src: '../../../static/img/banner1.png'
					},
					{
						content: '3',
						src: '../../../static/img/banner2.png'
					}
				],
				heroTabs: ['合约交易英雄榜'],
				heroTabsCurrent: 0,
				tabs: ['全部', '本月', '今日'],
				tabsCurrent: 0
			};
		},
		onLoad() {},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			heroClick(e) {
				this.heroTabsCurrent = e;
			},
			tabsClick(e) {
				this.tabsCurrent = e;
			},
		}
	};
</script>

<style>
	.notice {
		padding: 0rpx 25rpx;
		margin-top: 20rpx;
	}

	.notice .uni-noticebar {
		border-radius: 10rpx;
	}

	.banner {
		padding: 0rpx 25rpx;
		margin-bottom: 40rpx;
	}

	.banner .uni-swiper__warp {
		overflow: hidden;
		border-radius: 15rpx;
		height: 250rpx;
		box-shadow: 0 0px 10px rgb(0 0 0 / 30%), 0 0px 0px rgb(0 0 0 / 30%);
	}

	.banner .swiper-box {
		height: 250rpx;
	}

	.banner uni-image {
		display: block;
		width: 100%;
		height: 250rpx;
	}

	.grid-item {
		text-align: center;
		align-items: center;
	}

	.grid-item image {
		width: 90rpx;
		height: 90rpx;
		margin: 0 auto 20rpx;
	}

	.grid-item .text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #111111;
	}

	.api-and-record {
		display: flex;
		padding: 0rpx 25rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.api-and-record .item {
		flex: 1;
		display: flex;
		height: 120rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-shadow: 0 0px 10px rgb(0 0 0 / 20%), 0 0px 0px rgb(0 0 0 / 20%);
		margin-right: 75rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.api-and-record .item:last-child {
		margin-right: 0rpx;
	}

	.api-and-record image {
		display: inline-block;
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
	}

	.hero-tabs {
		padding: 20rpx;
	}

	.hero-tabs text {
		font-size: 25rpx;
		margin-right: 20rpx;
		color: #78797d;
		font-family: PingFang SC;
	}

	.hero-tabs .active {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.table-tabs {
		display: flex;
	}

	.table-tabs .item {
		position: relative;
		flex: 1;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.table-tabs .item.active {
		font-weight: bold;
		color: #111111;
	}

	.table-tabs .item.active::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0rpx;
		width: 42rpx;
		height: 5rpx;
		background: linear-gradient(92deg, #02C7EA 0%, #A657F8 100%);
		border-radius: 3rpx;
		transform: translateX(-50%);
	}

	.table-wrap image {
		width: 50rpx;
		height: 42rpx;
	}

	.table-wrap text {
		color: red;
	}

	.table-wrap {
		padding: 20rpx 30rpx;
	}

	.table-wrap .uni-list-item {
		align-items: center;
		margin-bottom: 22rpx;
		border-radius: 10rpx;
		box-shadow: 0 0px 5px rgb(0 0 0 / 20%), 0 0px 0px rgb(0 0 0 / 20%);
	}

	.table-wrap>>>.uni-list-item__container {
		align-items: center;
	}

	.table-wrap>>>.uni-list-item__content-note {
		margin-top: 20rpx;
	}

	.table-wrap .body {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.table-wrap .rank {
		width: 58rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		margin-right: 20rpx;
		font-size: 30rpx;
	}

	.table-wrap .rank image {
		width: 100%;
		height: 100%;
	}

	.table-wrap .name {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.table-wrap .income {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.table-wrap .income text {
		margin-right: 10rpx;
	}

	.table-wrap .footer {
		text-align: right;
	}

	.table-wrap .footer .money {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
</style>
